<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title></title>
	    <script src="./js/common/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/template.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script type="text/javascript" src="js/common/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <style>
            
        </style>
    </head>
    <body>

        <div id="zgw">
            <div id="palace" class="flex">
                <v-nav></v-nav>
                <v-main></v-main>
            </div>
        </div>

        <template id="vMain">
            <div class="content overAuto">
                <div class="bfr">
                    <div class="fltrBox white flex flex-wrap box">
                        <div class="fg flex flex-align-items">
                            企业名称 <div class="inp"><input type="text" v-model="comp" placeholder="请输入"></div>
                        </div>
                        <div class="fg flex flex-align-items">
                            上报时间
                            <div class="inp input-group date" id='datetimepicker1'>
                                <span class="fill input-group-addon">
                                    <span class="glyphicon vc glyphicon-calendar"></span>
                                </span>
                                <input type='text' class="rptTime" class="timeInput" id="date"/>
                            </div>                        
                        </div>
                        <div class="fg flex flex-align-items">
                            状态
                            <div class="slct">
                                <input type="text" class='status' :value="statusAry[optInd]" readonly>
                                <div class="opt">
                                    <p v-for="(item,i) in statusAry" @click="chs(i)" :data-status="i" :class="i == optInd?'active':''">{{item}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="blue btn" @click="search">查询</div>
                    </div>
                    <div class="tableBox overAuto">
                        <table class="white">
                            <thead>
                                <!--
                                <td>
                                    <div class="chsBox"><p class="chs"><img src="img/gou.png"></p></div>
                                </td>
                                -->
                                <td v-for="(item,i) in thd">
                                    <div :style="'min-width:' + item.width + 'px'">{{item.name}}</div>
                                </td>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in tblData">
                                    <td v-for="(value,key) in item" :class="[key == 'status'?'status':'',key == 'file'?'file':'']">
                                        <div>
                                            <template v-if="key == 'status'">
                                                {{statusAry[value]}}
                                            </template>
                                            <template v-else-if="key == 'btns'">
                                                <div class="btns">
                                                    <span :class="['btn',bItm.cls]" v-for="(bItm,b) in value">{{bItm.name}}</span>
                                                </div>
                                            </template>
                                            <template v-else>{{value}}</template>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="aft" v-if="info && curInd != undefined">
                    <p class="ttl1">发债申请</p>
                    <div class="box white">
                        <p class="ttl2">主体信息</p>
                        <div class="valBox">
                            <div class="fv flex"><span class="lbl">企业名称</span> <span class="val">{{info.comp}}</span></div>
                            <div class="fv flex"><span class="lbl">证件号码</span> <span class="val">{{info.cardNum}}</span></div>
                            <div class="fv flex"><span class="lbl">通信地址</span> <span class="val">宁波某某某某</span></div>
                        </div>
                    </div>
                    <div class="box white">
                        <p class="ttl2">发债条件</p>
                        <div class="valBox flex half">
                            <div class="fv flex"><span class="lbl">净资产</span><span class="val">宁波某某某有限公司</span></div>
                            <div class="fv flex"><span class="lbl">资金投向</span><span class="val">5455452556652354112</span></div>
                            <div class="fv flex">
                                <span class="lbl">附件</span>
                                <div class="upld uplded">
                                    <div class="upBtn vc">文件上传<input type="file" id="resume" class="fill"></div>
                                    <p class="fileName">{{info.file}}</p>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <p class="ttl1">审批意见</p>
                    <div class="box white">
                        <div class="valBox nopad">
                            <div class="flex radio">
                                <span class="lbl">订单审核:</span>
                                <p>
                                    <span><input type="radio" id="agree" name="agree"> <label for="agree">通过</label></span>
                                    <span><input type="radio" id="disagree" name="agree"> <label for="disagree">不通过</label></span>
                                </p>
                            </div>
                            <div class="flex tta">
                                <span class="lbl">审核意见:</span>
                                <textarea class="overAuto"></textarea>
                        </div>
                        <div class="btns">
                            <p class="submit blue btn" v-if="info.status == 1">提交</p><p @click="cancel" class="cancel btn">取消</p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            
            var picker1;
            var contn = new Vue({
                el:'#zgw',
                data:{
                
                },
                methods:{
                    
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                optInd:0,
                                comp:'',
                                statusAry:['全部','待审批','已审批'],
                                thd:[
                                    {name:'ID',width:120},
                                    {name:'企业名称',width:120},
                                    {name:'证件号码',width:120},
                                    {name:'附件',width:120},
                                    {name:'上报时间',width:170},
                                    {name:'状态',width:100},
                                    {name:'操作',width:150},
                                ],
                                info:'',
                                tblData:[
                                    {id:124554545582,comp:'企业1',cardNum:'13445665235465s',file:'某某某发债方案.pdf',intoTime:'2022-02-02 16:16:16',status:1,btns:[{name:'查看',cls:'read orange'},{name:'删除',cls:'del red'}]},
                                    {id:124554545582,comp:'企业22',cardNum:'13445665235465s',file:'发债方案.pdf',intoTime:'2022-02-03 16:16:16',status:1,btns:[{name:'查看',cls:'read orange'},{name:'删除',cls:'del red'}]},
                                    {id:124554545582,comp:'企业3',cardNum:'13445665235465s',file:'某发债方案3.pdf',intoTime:'2022-04-27 16:16:16',status:2,btns:[{name:'查看',cls:'read orange'},{name:'删除',cls:'del red'}]}
                                ],
                                curInd:undefined
                            }
                        },
                        methods:{
                            cancel(){
                                swtActive('#palace .content .bfr');
                                this.curInd = undefined
                            },
                            chs(i){
                                this.optInd = i;
                            },
                            search(){
                                var This = this;
                                $('table tbody tr').removeClass('hidden');
                                var rptTime = $('.rptTime').val();
                                this.tblData.forEach(function(item,i){
                                    if(
                                        (item.status != This.optInd && This.optInd)
                                        ||
                                        (This.comp.replace(/\s+/g,'').length && item.comp.indexOf(This.comp) < 0)
                                        ||
                                        (rptTime && item.intoTime.indexOf(rptTime) < 0)
                                    ){
                                        $('table tbody tr').eq(i).addClass('hidden');
                                    }
                                })
                            }
                        },
                        mounted(){
                            var This = this;
                            $('table .btn').click(function(){
                                var cls = $(this)[0].className;
                                var ind = $(this).parents('tr').index();
                                if(cls.indexOf('read') >= 0){
                                    This.curInd = ind;
                                    This.info = This.tblData[ind];
                                    swtActive('#palace .content .bfr');
                                    setTimeout(function(){
                                        $('.submit').click(function(){
                                            This.info.status = 2;
                                            var newList = This.tblData;
                                            newList[This.curInd].status = 2;
                                            This.tblData = newList;
                                            showModel('提交成功');
                                        })
                                    },10)
                                    
                                }else if(cls.indexOf('del') >= 0){
                                    var newList = This.tblData;
                                    newList.splice(ind,1);
                                    This.tblData = newList;
                                }
                            })
                        }
                    },

                }
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>